<template>
  <div class="chat-header">
    <div class="chat-header-info">
      <div class="chat-title">{{ displayName || '未选择聊天对象' }}</div>
    </div>
    <!-- 右上角按钮区域：语音、视频、三个横点 -->
    <div class="chat-header-actions" style="display: flex !important; align-items: center !important; gap: 8px !important;">
      <!-- 好友聊天：显示语音和视频按钮 -->
      <template v-if="targetType !== 'Group'">
        <div 
          class="header-action-btn"
          style="width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; color: #666666 !important; background: transparent !important; cursor: pointer !important;"
          @click.stop.prevent="handleVoiceCall"
        >
          <q-icon name="phone" size="21px" />
          <q-tooltip>语音通话</q-tooltip>
        </div>
        <div 
          class="header-action-btn"
          style="width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; color: #666666 !important; background: transparent !important; cursor: pointer !important;"
          @click.stop.prevent="handleVideoCall"
        >
          <q-icon name="videocam" size="21px" />
          <q-tooltip>视频通话</q-tooltip>
        </div>
      </template>
      <!-- 群组聊天：显示群组通话按钮 -->
      <div 
        v-else
        class="header-action-btn"
        style="width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; color: #666666 !important; background: transparent !important; cursor: pointer !important;"
        @click.stop.prevent="handleGroupCall"
      >
        <div class="group-call-icon-wrapper">
          <q-icon name="phone" size="20px" class="group-phone-icon" />
          <div class="group-video-badge">
            <q-icon name="videocam" size="7px" class="group-video-icon" />
          </div>
        </div>
        <q-tooltip>语音/视频通话</q-tooltip>
      </div>
      <!-- 三个横点按钮 -->
      <div 
        class="header-action-btn"
        :class="{ 'header-action-btn-active': drawerOpen }"
        style="width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; color: #666666 !important; background: transparent !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; tap-highlight-color: transparent !important;"
        @click.stop.prevent="handleShowDetails"
        @mousedown.stop.prevent="handleMouseDown"
        @touchstart.stop.prevent="handleTouchStart"
      >
        <q-icon name="more_horiz" size="21px" />
        <q-tooltip>{{ drawerOpen ? '关闭详情' : (targetType === 'Group' ? '群组详情' : '好友详情') }}</q-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  currentTargetId: string | null
  targetName: string
  targetType?: 'User' | 'Group'
  getUserInitial: (userId: string | null) => string
  drawerOpen?: boolean
  memberCount?: number
}>()

const emit = defineEmits<{
  'show-details': []
  'voice-call': []
  'video-call': []
  'group-call': []
}>()

// 计算显示名称：如果是群组且有成员数，显示"群组名(人数)"格式
const displayName = computed(() => {
  if (!props.targetName) return ''
  
  if (props.targetType === 'Group' && props.memberCount !== undefined && props.memberCount !== null) {
    return `${props.targetName}(${props.memberCount})`
  }
  
  return props.targetName
})

const handleMouseDown = (event: Event) => {
  event.stopPropagation()
  event.stopImmediatePropagation()
  event.preventDefault()
}

const handleTouchStart = (event: Event) => {
  event.stopPropagation()
  event.stopImmediatePropagation()
  event.preventDefault()
}

const handleShowDetails = (event: Event) => {
  // 彻底阻止事件传播和默认行为
  event.stopPropagation()
  event.stopImmediatePropagation()
  event.preventDefault()
  
  // 使用 nextTick 确保事件完全处理完成后再触发
  setTimeout(() => {
    emit('show-details')
  }, 0)
}

const handleVoiceCall = (event: Event) => {
  event.stopPropagation()
  event.stopImmediatePropagation()
  event.preventDefault()
  emit('voice-call')
}

const handleVideoCall = (event: Event) => {
  event.stopPropagation()
  event.stopImmediatePropagation()
  event.preventDefault()
  emit('video-call')
}

const handleGroupCall = (event: Event) => {
  event.stopPropagation()
  event.stopImmediatePropagation()
  event.preventDefault()
  emit('group-call')
}
</script>

<style lang="sass" scoped>
// 强制样式生效 - 使用更高优先级的选择器
.chat-header
  padding: 12px 16px
  border-bottom: 1px solid rgba(0, 0, 0, 0.08)
  display: flex
  align-items: center
  gap: 12px
  background: #F5F5F5
  flex-shrink: 0
  position: relative
  z-index: 10
  -webkit-tap-highlight-color: transparent !important
  tap-highlight-color: transparent !important

  .chat-header-info
    flex: 1
    padding-left: 0

  .chat-title
    font-size: 16px
    font-weight: 500
    color: #000000
    letter-spacing: 0
    padding-left: 12px

  .chat-header-actions
    display: flex !important
    align-items: center !important
    gap: 8px !important
    flex-shrink: 0 !important
    -webkit-tap-highlight-color: transparent !important
    tap-highlight-color: transparent !important

    * 
      -webkit-tap-highlight-color: transparent !important
      tap-highlight-color: transparent !important

    // 使用更具体的选择器确保样式生效
    div.header-action-btn,
    .header-action-btn
      // 测试样式 - 如果看到红色边框说明样式已加载
      // border: 2px solid red !important
      color: #666666 !important
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important
      padding: 8px !important
      cursor: pointer !important
      display: flex !important
      align-items: center !important
      justify-content: center !important
      border-radius: 50% !important
      user-select: none !important
      -webkit-tap-highlight-color: transparent !important
      -webkit-touch-callout: none !important
      -webkit-user-select: none !important
      -moz-user-select: none !important
      -ms-user-select: none !important
      tap-highlight-color: transparent !important
      outline: none !important
      background: transparent !important
      border: none !important
      position: relative !important
      z-index: 1
      touch-action: manipulation !important
      -webkit-appearance: none !important
      appearance: none !important
      min-width: 36px !important
      min-height: 36px !important
      width: 36px !important
      height: 36px !important
      box-sizing: border-box !important
      // 强制覆盖 Quasar 样式
      margin: 0 !important
      
      &::before,
      &::after
        display: none !important
      
      :deep(.q-icon)
        background: transparent !important
        box-shadow: none !important
        transform: none !important
        pointer-events: none
        transition: color 0.2s ease
        
      &:hover
        background: rgba(0, 0, 0, 0.06) !important
        color: #191919 !important
        
        :deep(.q-icon)
          color: #191919 !important
      
      &:active
        background: rgba(0, 0, 0, 0.1) !important
        transform: scale(0.95) !important
        transition: all 0.1s ease !important
      
      &:focus,
      &:focus-visible
        outline: none !important
        box-shadow: none !important
      
      &.header-action-btn-active
        color: #07C160
        background: rgba(7, 193, 96, 0.12)
        
        :deep(.q-icon)
          color: #07C160
        
        &:hover
          background: rgba(7, 193, 96, 0.18)
          color: #06AD56
          
          :deep(.q-icon)
            color: #06AD56
        
        &:active
          background: rgba(7, 193, 96, 0.25)
          transform: scale(0.95)

    .group-call-icon-wrapper
      position: relative
      display: inline-flex
      align-items: center
      justify-content: center
      width: 20px
      height: 20px
      
      .group-phone-icon
        position: relative
        z-index: 1
        color: inherit
        flex-shrink: 0
        transition: color 0.2s ease
      
      .group-video-badge
        position: absolute
        bottom: -1px
        right: -2px
        width: 11px
        height: 11px
        background: #FFFFFF
        border-radius: 50%
        display: flex
        align-items: center
        justify-content: center
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15)
        z-index: 2
        flex-shrink: 0
        border: 0.5px solid rgba(0, 0, 0, 0.06)
        transition: transform 0.2s ease
        
        .group-video-icon
          color: #191919
          font-size: 7px
          line-height: 1
          display: flex
          align-items: center
          justify-content: center
          opacity: 0.9
      
    // 悬停时放大视频徽章
    .header-action-btn:hover .group-video-badge
      transform: scale(1.1)
</style>

<!-- 非 scoped 样式确保样式生效 - 使用更高优先级覆盖全局样式 -->
<style lang="sass">
// 使用更具体的选择器，确保覆盖全局 * 样式
div.chat-header div.chat-header-actions
  display: flex !important
  align-items: center !important
  gap: 8px !important
  flex-shrink: 0 !important

div.chat-header div.chat-header-actions div.header-action-btn,
.chat-header .chat-header-actions .header-action-btn,
.chat-header-actions .header-action-btn
  // 覆盖全局 * { margin: 0; padding: 0; } 样式
  width: 36px !important
  height: 36px !important
  min-width: 36px !important
  min-height: 36px !important
  padding: 8px !important
  box-sizing: border-box !important
  margin: 0 !important
  display: flex !important
  align-items: center !important
  justify-content: center !important
  border-radius: 50% !important
  color: #666666 !important
  background: transparent !important
  border: none !important
  outline: none !important
  cursor: pointer !important
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important
  user-select: none !important
  -webkit-tap-highlight-color: transparent !important
  
  // 覆盖 Quasar 可能的样式
  :deep(.q-icon)
    width: auto !important
    height: auto !important
    font-size: inherit !important
    color: inherit !important
  
  &:hover
    background: rgba(0, 0, 0, 0.06) !important
    color: #191919 !important
    
  &:active
    background: rgba(0, 0, 0, 0.1) !important
    transform: scale(0.95) !important
</style>

